<template>
    <!-- 数据管理 - 订单列表 -->
    <div>
        <el-header height="auto">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item :to="{ path: '/Main/index' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item><a>数据管理</a></el-breadcrumb-item>
                <el-breadcrumb-item>订单列表</el-breadcrumb-item>
            </el-breadcrumb>
            <el-dropdown placement="bottom">
                <span class="el-dropdown-link">
                <img src="../../../assets/img/default.jpg" alt="">
                </span>
                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item @click.native="goToIndex">首页</el-dropdown-item>
                    <el-dropdown-item @click.native="LogOUt">退出</el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
        </el-header>
        <main class="user-content list_content">
            <section>
              <template>
                <el-table :data="tableData" style="width: 100%">
                  <el-table-column type="expand">
                    <template slot-scope="props">
                      <el-form label-position="left" inline class="demo-table-expand">
                        <el-form-item label="用户名">
                          <span>{{ props.row.userName }}</span>
                        </el-form-item>
                        <el-form-item label="店铺名称">
                          <span>{{ props.row.shopName }}</span>
                        </el-form-item>
                        <el-form-item label="收货地址">
                          <span>{{ props.row.goodsAddress }}</span>
                        </el-form-item>
                        <el-form-item label="店铺 ID">
                          <span>{{ props.row.shopId }}</span>
                        </el-form-item>
                        <el-form-item label="店铺地址">
                          <span>{{ props.row.shopAddres }}</span>
                        </el-form-item>

                      </el-form>
                    </template>
                  </el-table-column>
                  <el-table-column label="订单 ID" prop="orderId"></el-table-column>
                  <el-table-column label="订单总价" prop="price"></el-table-column>
                  <el-table-column label="订单状态" prop="state"></el-table-column>
                </el-table>
              </template>
            </section>
            <section class="Pagination">
              <el-pagination
                  background
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                  :current-page.sync="currentPage1"
                  :page-size="100"
                  layout="total, prev, pager, next"
                  :total="1000">
              </el-pagination>
            </section>
        </main>
    </div>
</template>
<script src="./template.js"></script>
<style scoped>
  .demo-table-expand {
    font-size: 0;
  }
  .demo-table-expand label {
    width: 90px;
    color: #99a9bf;
  }
  .demo-table .demo-table-expand label {
    width: 90px;
    color: #99a9bf;
}
  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
  }
</style>